<template>
    <ul class="article-list list-unstyled clearfix">
        <li v-for="article in articleList" class="article-item" :class="article.images.length > 0 ? 'have-img' : ''">
            <a v-if="article.images.length > 0" v-link="{ name: 'article', params: {id: article._id } }" class="wrap-img">
                <img :src="article.images[0].url + '-100x100'" />
            </a>
            <div>
                <p class="list-top">
                    <a class="author-name blue-link" target="_blank">{{article.author_id.nickname}}</a>
                    <em>·</em>
                    <span class="time">{{ article.publish_time | customTime}}</span>
                </p>
                <h4 class="title">
                    <a v-link="{ name: 'article', params: {id: article._id } }" class="link-title">{{article.title}}</a>
                    <dropdown v-if="isEdit">
                        <a href="javascript:void(0)" class="pull-right" data-toggle="dropdown">
                            <i class="fa fa-gear"></i>
                        </a>
                        <ul slot="dropdown-menu" class="dropdown-menu">
                            <li><a v-link="{ name: 'writerEdit', params: {id: article._id } }" data-action="delete-note"><i class="fa fa-pencil-square-o"></i> 编辑文章 </a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:void(0)" @click="deleteArticle(article._id)"><i class="fa fa-trash-o"></i> 删除文章 </a></li>
                        </ul>
                    </dropdown>
                </h4>
                <div class="list-footer">
                    <span>阅读 {{article.visit_count}}</span>
                    <span> · 评论 {{article.comment_count}}</span>
                    <span> · 喜欢 {{article.like_count}}</span>
                </div>
            </div>
        </li>
        <li v-if="articleList.length < 1" class="no-content">正在大力回车...</li>
    </ul>
</template>
<style>
    .blue-link {
        color: #4094c7;
    }
</style>
<script>
    import { dropdown } from 'vue-strap'
    import {deleteArticleAction} from '../../vuex/actions'

    export default{
        props:['articleList','isEdit'],
        components:{
            dropdown
        },
        methods:{
            deleteArticle(id){
                this.deleteArticleAction(id)
            }
        },
        vuex:{
            actions:{
                deleteArticleAction
            }
        }
    }
</script>
